<template>
  <div>
    <div class="i-layout-page-header">
      <h1>列表查询</h1>
      <h3>{{title}}</h3>
    </div>
    <Card>
      <div>
        <div class="search-con search-con-top">
          <Select v-model="searchKey" class="search-col">
            <Option v-for="item in columns" v-if="item.key !== 'action' &&item.key !== 'selection' &&item.key !== 'index'"
              :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
          </Select>
          <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue" />
          <Button @click="handleSearch" class="search-btn" type="primary">
            <Icon type="search" />&nbsp;&nbsp;搜索</Button>
          <Poptip confirm title="您确定要删除这些项吗?" @on-ok="handleDeAlete" @on-cancel="cancel">
            <Button v-show="selection.length!=0" style="margin-left: 0.25rem;">删除</Button>
          </Poptip>
          <Button type="primary" @click="modal1 = true" style="float:right;">+ 新增</Button>
          <Modal v-model="modal1" title="创建/修改记录" @on-ok="ok" @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
              <FormItem label="品牌及型号" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入品牌及型号"></Input>
              </FormItem>
              <FormItem label="车牌号" prop="mail">
                <Input v-model="formValidate.mail" placeholder="请输入车牌号"></Input>
              </FormItem>
              <FormItem label="油卡卡号" prop="city">
                <!-- <Select v-model="formValidate.city" placeholder="请输入油卡卡号">
                  <Option value="beijing">New York</Option>
                  <Option value="shanghai">London</Option>
                  <Option value="shenzhen">Sydney</Option>
                </Select> -->
                <Input v-model="formValidate.city" placeholder="油卡卡号"></Input>
              </FormItem>
              <!-- <FormItem label="Date">
                <Row>
                  <Col span="11">
                  <FormItem prop="date">
                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                  </FormItem>
                  </Col>
                  <Col span="2" style="text-align: center">-</Col>
                  <Col span="11">
                  <FormItem prop="time">
                    <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
                  </FormItem>
                  </Col>
                </Row>
              </FormItem>
              <FormItem label="Gender" prop="gender">
                <RadioGroup v-model="formValidate.gender">
                  <Radio label="male">Male</Radio>
                  <Radio label="female">Female</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="Hobby" prop="interest">
                <CheckboxGroup v-model="formValidate.interest">
                  <Checkbox label="Eat"></Checkbox>
                  <Checkbox label="Sleep"></Checkbox>
                  <Checkbox label="Run"></Checkbox>
                  <Checkbox label="Movie"></Checkbox>
                </CheckboxGroup>
              </FormItem>
              <FormItem label="Desc" prop="desc">
                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
              </FormItem> -->
              <!--          <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
              </FormItem> -->
            </Form>
          </Modal>
          <!-- <Button v-show="selection.length!=0" style="margin-left: 0.25rem;" @click="editItem">编辑</Button> -->

        </div>
      </div>
      <Alert show-icon>
        <strong>已选择 </strong>
        <strong style="color: #2D8CF0;">{{selectNumber}}</strong>
        <strong> 项</strong>
      </Alert>
      <tables ref="selection" stripe v-model="tableData" :columns="columns" @on-select="handleSelected"
        @on-select-cancel="handleCancle" @on-select-all="handleSelectAll" @on-select-all-cancel="handleUnselectAll" @on-cell-click="handleCellClick" />
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="current" @on-change="changePage"></Page>
        </div>
      </div>

      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
  import Tables from '_c/tables'
  import {
    getTableData,
    getVehicleTableData
  } from '@/api/data'

  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    data() {
      return {
        tableColumnsChecked: ['ExPlateNum', 'VIC', 'OilCardD'],

        title: "车辆基本信息",
        formValidate: {
          name: '',
          mail: '',
          city: '',
          gender: '',
          interest: [],
          date: '',
          time: '',
          desc: ''
        },
        ruleValidate: {
          name: [{
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }],
          mail: [{
              required: true,
              message: 'Mailbox cannot be empty',
              trigger: 'blur'
            },
            {
              type: 'email',
              message: 'Incorrect email format',
              trigger: 'blur'
            }
          ],
          city: [{
            required: true,
            message: 'Please select the city',
            trigger: 'change'
          }],
          gender: [{
            required: true,
            message: 'Please select gender',
            trigger: 'change'
          }],
          interest: [{
              required: true,
              type: 'array',
              min: 1,
              message: 'Choose at least one hobby',
              trigger: 'change'
            },
            {
              type: 'array',
              max: 2,
              message: 'Choose two hobbies at best',
              trigger: 'change'
            }
          ],
          date: [{
            required: true,
            type: 'date',
            message: 'Please select the date',
            trigger: 'change'
          }],
          time: [{
            required: true,
            type: 'string',
            message: 'Please select time',
            trigger: 'change'
          }],
          desc: [{
              required: true,
              message: 'Please enter a personal introduction',
              trigger: 'blur'
            },
            {
              type: 'string',
              min: 20,
              message: 'Introduce no less than 20 words',
              trigger: 'blur'
            }
          ]
        },
        modal1: false,
        selectNumber: 0,
        columns: [{
            type: 'selection',
            width: 30,
            align: 'center',
            fixed: 'left',
            key: 'selection'
          }, {
            type: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            key: 'index'
          },
          {
            title: '品牌及型号',
            // key: 'CarBrandandModel',
            key:'5f36068356391c0001ba1eec',
            width: 150,
          },
          {
            title: '车牌号',
            // key: 'PlateNum',
            key:'5f36068356391c0001ba1ee9',
            width: 150,
            editable: true
          }, {
            title: '原车牌号',
            key: 'ExPlateNum',
            width: 150,
            editable: true
          },
          {
            title: '车辆识别代号后六位',
            key: 'VICsix',
            width: 150,
          }, {
            title: '车架号',
            key: 'VIC',
            width: 150,
          },
          {
            title: '发动机后六位',
            key: 'EngineNum',
            width: 150,
          },
          {
            title: '油卡卡号',
            // key: 'OilCardM',
            key: '5f3605c0a0e96f0001737735',
            width: 150,
          }, {
            title: '油卡副卡号',
            key: 'OilCardD',
            width: 150,
          }, {
            title: 'ETC卡号',
            key: 'ETC',
            width: 150,
          }, {
            title: '购车价(含车船税)',
            key: 'CostIncTax',
            width: 150,
          }, {
            title: '购车价(不含车船税)',
            key: 'CostExcTax',
            width: 150,
          }, {
            title: '车辆购置税=车价（不含车船税）*10%',
            key: 'VPT',
            width: 150,
          }, {
            title: '保险费(发票金额)',
            key: 'AmoundIns',
            width: 150,
          }, {
            title: '保险费(OA流程)',
            key: 'OA',
            width: 150,
          }, {
            title: '保险日期',
            key: 'EndDateIns',
            width: 150,
          }, {
            title: '上牌(费用)',
            key: 'PlateCost',
            width: 150,
          }, {
            title: '上牌(日期)',
            key: 'PlateDate',
            width: 150,
          },
          {
            title: '操作',
            fixed: 'right',
            key: 'action',
            width: 80,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '编辑')
              ]);
            }
          }
        ],
        tableData: [],
        total: 100,
        current: 1,
        selection: [],
        searchValue: '',
        searchKey: '',
        info: {
          "appKey": "a6f6ed62036abb91",
          "sign": "MDc2NDQwZGY4ZWYzNDU4MDM0MGFmMjM4YTUzMWUxNTA0OTBiZjYyMTJiNDFlNzZkOGYxOGU2ZjUwM2VlMzZlMA==",
          "worksheetId": "5f3605c0a0e96f0001737734",
          "appId": "33a6b20c-8dd5-4e05-bf57-78255fcf82f0",
          "viewId": "5f3605c0a0e96f0001737738",
          "pageSize": "10",
          "pageIndex": "1",
          "sortId": "",
          "isAsc": "false",
          "keywords": ""
        }
      }
    },
    methods: {
      handleSearch() {
        console.log(this.searchKey);
        this.tableData = this.tableData.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1)
      },
      handleClear(e) {
        if (e.target.value === '') this.tableData = this.value
      },
      show(index) {
        console.log(this.tableData[index])
        this.modal1 = true
      },
      ok() {
        this.$Message.info('新增');
      },
      cancel() {
        this.$Message.info('取消');
      },
      handleCellClick(row, column, data, event){
        console.log(row);
        console.log(column);
        console.log(data);
        console.log(event);
        
        
      },
      handleUnselectAll(selection) {
        this.selection = []
        this.selectNumber = 0
      },
      handleSelectAll(selection) {
        console.log("selection:")
        console.log(selection)
        this.selection = selection;
        this.selectNumber = selection.length
      },
      handleCancle(selection) {
        this.selectNumber = selection.length
        this.selection = selection;
      },
      handleSelected(selection, row) {
        this.selectNumber = selection.length
        this.selection = selection;
        console.log("selection:")
        console.log(selection)
        console.log("row.initRowIndex:")
        console.log(row.initRowIndex)
      },
      handleDeAlete() {

        var index = this.selection.length - 1;
        for (; index >= 0; index--) {
          this.tableData.splice(this.selection[index].initRowIndex, 1);
          console.log(index);
        }
        console.log(this.tableData);
        this.selection = [];
        this.changePage();
      },

      exportExcel() {
        console.log(this.selectNumber);
        this.$refs.selection.exportCsv({
          filename: `table-${(new Date()).valueOf()}.csv`
        })
      },
      changePage(current) {
        this.current=current;
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        this.info.pageIndex=this.current.toString()
         console.log("this.info.pageIndex" )
        console.log( this.info.pageIndex+"this.current.toString()"+this.current.toString())
        getVehicleTableData(this.info).then(res => {
          this.tableData = res.data.data.rows
        })
      }
    },
    mounted() {
      this.info.pageIndex=this.current.toString()
      getVehicleTableData(this.info).then(res => {
        this.total=res.data.data.total
        this.tableData = res.data.data.rows
      });

    }
  }
</script>

<style>
  .i-layout-page-header {
    background-color: #FFF;
    padding: 1.25rem;
    margin-bottom: 1rem;
  }
</style>
